<template>
  <div class="ai-reading-analysis">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link to="/english/ai-reading" class="text-dark">
        <i class="bi bi-chevron-left fs-4"></i>
      </router-link>
      <h5 class="mb-0 mx-auto">答案解析</h5>
    </div>

    <!-- 解析内容 -->
    <div class="analysis-content">
      <!-- 文章回顾 -->
      <div class="article-review bg-white p-4 mb-3">
        <h6 class="mb-3">文章回顾</h6>
        <div class="paragraph" v-for="(para, index) in paragraphs" :key="index">
          <div class="english-text" v-html="highlightVocabs(para)"></div>
        </div>
      </div>

      <!-- 题目解析 -->
      <div class="question-analysis bg-white p-4 mb-3" v-for="(analysis, index) in analysisData" :key="index">
        <h6 class="mb-3">Question {{ index + 1 }}</h6>
        <p class="question-text">{{ analysis.question }}</p>
        
        <!-- 选项列表 -->
        <div class="options-list mb-3">
          <div v-for="option in analysis.options" :key="option.id"
            class="option-item"
            :class="{ 'correct': option.id === analysis.correctAnswer }"
          >
            {{ option.text }}
            <i v-if="option.id === analysis.correctAnswer" class="bi bi-check-circle-fill text-success"></i>
          </div>
        </div>

        <!-- 解析说明 -->
        <div class="explanation">
          <h6 class="text-primary mb-2">解析：</h6>
          <p>{{ analysis.explanation }}</p>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-tools position-fixed bottom-0 w-100 bg-white p-3">
      <button class="btn btn-primary w-100" @click="backToExercise">
        返回练习
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AIReadingAnalysisView',
  
  data() {
    return {
      vocabList: ['deteriorate', 'resilient', 'sustainable', 'implement'],
      paragraphs: [
        'As cities continue to grow, urban planners face increasing challenges to create sustainable environments. The quality of infrastructure tends to deteriorate over time, requiring constant maintenance and upgrades. However, modern cities have proven to be remarkably resilient, adapting to various challenges through innovative solutions.',
        'To address these challenges, city governments must implement comprehensive development strategies. These strategies often involve smart technology integration and green infrastructure development, ensuring long-term sustainability while maintaining economic growth.'
      ],
      analysisData: [
        {
          question: 'What is the main challenge faced by urban planners according to the passage?',
          options: [
            { id: 'A', text: 'A. Creating sustainable urban environments' },
            { id: 'B', text: 'B. Managing population growth' },
            { id: 'C', text: 'C. Implementing new technologies' },
            { id: 'D', text: 'D. Maintaining economic growth' }
          ],
          correctAnswer: 'A',
          explanation: '文章开头直接指出城市规划者面临的主要挑战是创建可持续的环境（create sustainable environments）。这是文章的中心主题，其他选项虽然也有提及，但都不是主要挑战。'
        },
        {
          question: 'How do modern cities demonstrate resilience?',
          options: [
            { id: 'A', text: 'A. By preventing infrastructure deterioration' },
            { id: 'B', text: 'B. By adapting through innovative solutions' },
            { id: 'C', text: 'C. By increasing population capacity' },
            { id: 'D', text: 'D. By focusing on economic growth' }
          ],
          correctAnswer: 'B',
          explanation: '文章明确指出现代城市通过创新解决方案（through innovative solutions）来适应各种挑战，展现出显著的适应力（resilient）。这直接对应B选项。'
        }
      ]
    }
  },

  methods: {
    highlightVocabs(text) {
      let highlightedText = text
      this.vocabList.forEach(vocab => {
        const regex = new RegExp(vocab, 'gi')
        highlightedText = highlightedText.replace(
          regex, 
          `<span class="target-vocab">${vocab}</span>`
        )
      })
      return highlightedText
    },

    backToExercise() {
      this.$router.push('/english/ai-reading')
    }
  }
}
</script>

<style scoped>
.ai-reading-analysis {
  background-color: #f0f9f9;
  min-height: 100vh;
  padding-bottom: 80px;
}

.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 15px;
}

.analysis-content {
  padding: 0 15px;
}

.article-review, .question-analysis {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

:deep(.target-vocab) {
  background: rgba(64, 224, 208, 0.1);
  border-bottom: 2px solid #40e0d0;
  padding: 0 2px;
}

.question-text {
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
}

.option-item {
  padding: 12px 15px;
  margin-bottom: 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.option-item.correct {
  background: rgba(40, 167, 69, 0.1);
  border-color: #28a745;
}

.explanation {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
}

.bottom-tools {
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
</style> 